<template>
	<div>
		<!--查询部分-->
		<el-row :gutter="24">
			<el-col :span="2" style="">
				<p class="queryLabel">单位:</p>
			</el-col>
			<el-col :span="3">
				<el-input placeholder="请选择单位" size="small" icon="more" v-model="companyLabel" :on-icon-click="openDeptTree"></el-input>
			</el-col>

			<el-col :span="2">
				<p class="queryLabel">月份：</p>
			</el-col>
			<el-col :span="3">
				<el-date-picker v-model="data.dateStart" size="small" style="width:100%;" type="month" clearable placeholder="起始月份">
				</el-date-picker>
			</el-col>
			<el-col :span="3" style="text-align: right;">
				<el-button type="primary" size="small" @click="query">查询</el-button>
				<el-button type="primary" size="small" v-on:click='downloadDifference'>导出</el-button>
			</el-col>
		</el-row>

		<!--表格部分-->
		<el-table :data="receiveData" border="" show-summary stripe sum-text="汇总" style="width:100%">

			<el-table-column prop="QueryDate" label="日期" width="180" sortable></el-table-column>
			<el-table-column prop="carSeries" label="车系" width="180" sortable></el-table-column>
			<el-table-column label="财务" style="text-align: center;">
				<el-table-column prop="FinanceIn" label="入库" width="110"></el-table-column>
				<el-table-column prop="FinanceOut" label="出库" width="110"></el-table-column>
				<el-table-column prop="FinanceStock" label="库存" width="110"></el-table-column>
			</el-table-column>
			<el-table-column label="库管" style="text-align: center;">
				<el-table-column prop="CarIn" label="入库" width="110"></el-table-column>
				<el-table-column prop="CarOut" label="出库" width="110"></el-table-column>
				<el-table-column prop="CarStock" label="库存" width="110"></el-table-column>
			</el-table-column>
			<el-table-column label="差异" style="text-align: center;">
				<el-table-column  :formatter="deIn" label="入库" width="110"></el-table-column>
				<el-table-column  :formatter="deOut" label="出库" width="110"></el-table-column>
				<el-table-column :formatter="deStock" label="库存" width="110"></el-table-column>
			</el-table-column>
		</el-table>
		<!--分页-->
		<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="total">
		</el-pagination>
		<!--引用单位选择模块-->
		<company :show="showCompany" v-if="showCompany" v-on:close="showCompany=false" v-on:insert="inserts"></company>
	</div>

</template>

<script>
	import moment from 'moment'
	import company from '../../insPlugins/company.vue' //单位选择模块
	export default {
		data: function() {
			return {
				//每页的数量
				page: this.page,
				//页码数
				CurentPage: 1,
				//单位ID
				companyId: [],
				//单位名称
				companyLabel: "",
				//单位选择Dialog
				showCompany: false,
				//查询条件数据集
				data: {
					companyId: [], // 公司ID
					dateStart: new Date(), // 起始时间
					dateEnd: "", // 结束时间
				},
				//查询结果接收数据集
				receiveData: [],
				total: 0,
			}
		},
		computed: {},
		methods: {
			//实物与财务差异表导出
			downloadDifference:function(){
				window.location.href = this.API_ROOT + '/scm/monthlyBalance/exportDifferCar?uid=' + window.localStorage.getItem("uid") + "&date=" + this.$data.data.dateStart;
			},
			deIn:function(row, column){
				return Number(row.FinanceIn)- Number(row.CarIn);
			},
			deOut:function(row, column){
				return Number(row.FinanceOut)- Number(row.CarOut);
			},
			deStock:function(row, column){
				return Number(row.FinanceStock)- Number(row.CarStock);
			},
			//单位选择
			openDeptTree: function() {
				this.$data.showCompany = true; // 显示单位选择模块
			},
			//查询按钮
			query: function() {

				this.$data.data.companyId = this.$data.companyId; // 获取单位ID
				this.$data.data.dateStart = this.momentFu(this.$data.data.dateStart); //起始时间格式化
				this.$data.data.dateEnd = this.momentFu(this.$data.data.dateEnd); // 结束时间格式化
debugger;
				this.$http.post(this.API_ROOT + '/scm/monthlyBalance/diffCar', this.$data.data, {
					params: {
						start: this.$data.CurentPage, //页码
						limit: this.$data.page.pageSize, //每页的数量
					}
				}).then((response) => {

					debugger;
					if(response.body.success) {
						this.$data.receiveData = response.body.dataList;
						this.$data.total = parseInt(response.body.total); //数据条数（必须强转成int类型，否则不显示）
						debugger;
					} else {}

					debugger;

				}, (response) => {});

				debugger;
			},
			//单位选择的回调
			inserts: function(val, lable) {

				this.$data.companyId = val; //单位ID
				this.$data.companyLabel = lable; //单位名称

				debugger;
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},
			//时间格式化
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM");
				}
			},

			//测试数据
			TestgetData: function() {
				var list = [{
					"car": "1",
					"inWarehouse": "1",
				}];
				var listAdd = {
					"car": "1",
					"inWarehouse": "1"
				};
				for(var i = 0; i < 26; i++) {
					list.push(listAdd);
				}

				this.$data.receiveData = list;
				debugger;
			},
		},
		//表单创建时执行
		created: function() {
			//给单位默认值
			this.$data.companyLabel=window.localStorage.getItem("companyName");
			this.$data.companyId["0"]=window.localStorage.getItem("companyId");
			this.query();
		},
		components: {
			company
		},
	}
</script>

<style>

</style>